<template>
  <div class="page">
    <!-- conrent -->
    <div class="content bg-fff fixed">
      <!-- input -->
      <div class="content-box flex">
        <div class="icon pl-5">
          <i class="iconfont">&#xe608;</i>
        </div>
        <div class="input-box pl-10 flex">
          <input
            @input="search"
            type="search"
            placeholder="请输入搜索关键词"
            v-model="keyword"
          />
        </div>
      </div>
    </div>
    <!-- 分类商品    -->
    <div class="van-tree-select flex">
      <!-- 导航栏 -->
      <div class="select-nav">
        <a
          class="nav-list "
          :class="index === currentIndex ? 'nav-listone' : ''"
          v-for="(item, index) in typeList"
          :key="item.categoryId"
          @click="changeType(item.categoryId, index)"
        >
          <div>{{ item.name }}</div>
        </a>
      </div>

      <!-- 产品列表 -->

      <div class="select-right">
        <ul class="flex jc-sb fww">
          <li v-for="item in productList" :key="item.productId">
            <img :src="item.imgUrl" alt="" />
            <p class="f12">{{item.masterName}}</p>
          </li>
        </ul>
        <div class="empty" v-if="productList.length === 0">没有数据</div>
      </div>

      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import $axios from "@/utils/request";
export default {
  components: {
    Footer,
  },
  data() {
    return {
      typeList: [],
      //当前a
      currentIndex: 0,
      //获取商品列表
      productList: [],
      //搜索关键字
      keyword: "",
      //防抖的teimer
      timer: null,
    };
  },
  created() {
    this.getTypeList();
  },
  methods: {
    //获取分类列表
    async getTypeList() {
      try {
        let res = await $axios.get("/category/all");
        this.typeList = res.list;
        //第一给分类的id
        let firstId = res.list[0].categoryId;
        //获取第一个分类的商品列表
        this.getProductList(firstId);
      } catch (error) {
        this.$toast.fail(error);
      }
    },
    //获取商品列表
    async getProductList(id) {

      try {
        let data = { categoryId: id };
        let res = await $axios.get("/product/list", data);
        this.productList = res.list;
      } catch (error) {
        this.$toast.fail(error);
      }
    },
    //切换分类
    changeType(categoryId, index) {
      this.currentIndex = index;
      this.getProductList(categoryId);
    },
    //搜索
    search() {
      if (!this.keyword) return false;
      try {
          //防抖
        clearTimeout(this.timer);
        this.timer = setTimeout(async ()=> {
            let res = await $axios.get("/product/search", {
          keyword: this.keyword,
        });
        this.productList = res.list;
        }, 1000);

        
      } catch (error) {
        this.$toast.fail(error);
      }
    },
  },
};
</script>


<style lang="css" scoped>
@import "./classification.css";

.empty{
    line-height: 50px;
    text-align: center;
    color: #777;
}
</style>